<template>
  <div class="wrapper">
    <div class="editName">
      <div class="header">
      <span class="return" @click="back()">取消</span>群成员<span class="send" @click="changeGroupOwner()">完成</span>
      </div>
      <div class="setNameLine"></div>
      <ul>
        <li class="friendItem" v-for="item in groupPersons" v-if="item.RoleEn != 'Owner'">
          <span @click="toggleFriend($event, item)" class="circle"></span>
          <img class="friendImg" :src="item.Tag_Profile_IM_Image" alt="">
          <div class="friendName">{{item.Tag_Profile_IM_Nick}}<div class="friendNameLine"></div></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Client from '../../assets/js/common';
import { Toast } from 'mint-ui';
import { Popup } from 'mint-ui';
import { Actionsheet } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import {checkStatus} from '../../assets/js/login';
export default {
  data () {
    return {
      friendList: [],
      loginInfo: {},
      groupPersons:[],
      groupId: '',
      friendId: '',
      groupMemberArr: []
    }
  },
  created () {
    // 登录
    checkStatus((loginInfo) => {
      this.loginInfo = loginInfo;
      this.groupId = Client.getStore('ClickCurrentGroupData').GroupId;
      console.log(123132,Client.getStore('searchGroupData'))
      this.groupMembers();
    });
  },
  methods: {
    back() {
      history.back();
    },

      // 个人资料列表
			getpersonData(ids) {
				let That = this;
					let tag_list = [
							"Tag_Profile_IM_Nick", // 昵称
							"Tag_Profile_IM_Image", // 头像URL
					];
					let options = {
							'To_Account': ids,
							'TagList': tag_list
					};
					webim.getProfilePortrait(
							options,
							(resp) => {
									 if (resp.UserProfileItem && resp.UserProfileItem.length > 0) {
                     let data = [];
                     for(let i = 0; i < resp.UserProfileItem.length; i++){
                       let obj =  {};
                        obj["To_Account"] = resp.UserProfileItem[i].To_Account;
                       for(let j = 0; j < resp.UserProfileItem[i].ProfileItem.length; j++){
                         obj[resp.UserProfileItem[i].ProfileItem[j].Tag] = resp.UserProfileItem[i].ProfileItem[j].Value
                       }
                       for(let k = 0; k < this.groupMemberArr.length; k++){
                         if(obj["To_Account"] == this.groupMemberArr[k].Member_Account) {
                           obj["RoleEn"] = this.groupMemberArr[k].Part;
                         }
                       }
                       data.push(obj);
                     }
                     this.groupPersons = data;
										 Client.log(data);
									}
							},
							(err) => {
                Client.errInfo()
									//alert(err.ErrorInfo);
							}
					);
					// $('#set_profile_portrait_dialog').modal('show');
			},

      // 获取当前群组成员
      groupMembers() {
            // initGetGroupMemberTable([]);
						let options = {
								'GroupId': this.groupId,
								'Offset': 0, // 必须从0开始
								'Limit': 20000,
								'MemberInfoFilter': [
										'Account',
										'Role',
										'JoinTime',
										'LastSendMsgTime',
                    'ShutUpUntil',
								]
						};
						webim.getGroupMemberInfo(
								options,
								 (resp) => {
										if (resp.MemberNum <= 0) {
												Toast('该群组目前没有成员');
												return;
										}
                    let data = [];
                    let ids = [];
										for (let i in resp.MemberList) {
                        let account = resp.MemberList[i].Member_Account;
												let role = webim.Tool.groupRoleEn2Ch(resp.MemberList[i].Role);
												let part = resp.MemberList[i].Role;
												let join_time = webim.Tool.formatTimeStamp(resp.MemberList[i].JoinTime);
												let shut_up_until = webim.Tool.formatTimeStamp(resp.MemberList[i].ShutUpUntil);
												if (shut_up_until == 0) {
														shut_up_until = '-';
												}
												ids.push(account);
												data.push({
														GId: this.groupId,
														GroupId:  webim.Tool.formatText2Html(this.groupId),
														Member_Account: webim.Tool.formatText2Html(account),
														Role: role,
														JoinTime: join_time,
														ShutUpUntil: shut_up_until,
														Part: part
                        });
                    }
                    this.groupMemberArr = data;
                    this.getpersonData(ids);
								},
								(err) => {
                    Client.errInfo();
										// alert(err.ErrorInfo);
								}
						);
				},
    
    // 选择需要邀请的好友
    toggleFriend(event, item) {
      let circles = document.getElementsByClassName('circle');
      for(let i = 0; i < circles.length; i++) {
        circles[i].className = "circle";
      }  
      this.friendId = item.To_Account
      event.target.classList.add('circleActive');
    },
    changeStorage(storeName, field, changeData, save) {
       let createData = Client.getStore(storeName);
       if(!createData) return;
       createData[field] = changeData;
       Client.setStore(storeName, createData);
       if(save) {
         save = Client.getStore(storeName);
       }
    },
    //转让群组
    changeGroupOwner() {
      if(this.friendId == '') {
          Toast( '没有选中任何人');
          return;
        }

        let options = {
            'GroupId': this.groupId,
            'NewOwner_Account': this.friendId
        };
        webim.changeGroupOwner(
            options,
            resp => {
              Toast( '转让群组成功');
                this.$router.push({path: '/'});
            },
            (err) => {
              Client.errInfo()
                //alert(err.ErrorInfo);
            }
        );
    },
  } 
}
</script>

<style lang="less" scoped>

.editName{
        width: 100%;
        height: 100%;
        background: #F5F5F5;
        .setNameLine {
          height: 0.21rem;
        }
        .input {
          width: 100%;
          height: 0.5rem;
          text-indent: 0.15rem;
          background-color: white;
          color: #4A4A4A;
          font-size: 0.14rem;
          outline: none;
          font-weight: 400;
          border: none;
        }
      }
  .wrapper {
    .header {
      width: 3.75rem;
      height: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: 0.16rem;
      border-bottom: 1px solid #f4f4f4;
      background-color: white!important;
      .return {
        color: #4A4A4A;
        font-size: 0.16rem;
        position: absolute;
        left: 0.15rem;
      }
      .send {
        color: #4A4A4A;
        font-size: 0.16rem;
        position: absolute;
        right: 0.15rem;
      }
    }
    .friendItem {
    height: 0.6rem;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0 0.15rem;
    .circle {
      width: 0.2rem;
      height: 0.2rem;
      background-image: url('../../assets/img/icon_unsekected@3x.png');
      background-size: 100%;
      background-repeat: no-repeat;
      margin-right: 0.15rem;
    }
    .circleActive {
      background-image: url('../../assets/img/icon_designate01@3x.png');
    }
    .defaultActive {
      background-image: url('../../assets/img/icon_selected01@3x.png')!important;
    }
    .friendImg {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      margin-right: 0.06rem;
    }
    .del {
      width: 0.25rem;
      height: 0.25rem;
    }
    .friendName {
      width: 100%;
      height: 0.6rem;
      line-height: 0.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      font-size: 0.16rem;
      .friendNameLine {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        background-color: #E1E1E1;
      }
    }
  }
    
  }
</style>


